<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layui and Embedded JSP Example</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <h1>Layui and Embedded JSP Example</h1>
        </div>
    </div>
    <div class="layui-row">
        <div style="margin-left: 40%" class="layui-col-md6">
            <button class="layui-btn" id="showMessageBtn">客户转客服</button>
            <button class="layui-btn" id="showMessageBtn1">客服转客户</button>
        </div>
    </div>
    <div class="layui-row">
    </div>
</div>

<script src="static/layui/layui.js"></script>
<script>
    layui.use('layer', function(){
        var layer = layui.layer;

        // 点击按钮显示在线客服对话框
        document.getElementById('showMessageBtn').onclick = function() {
            showMessage1();
        };

        document.getElementById('showMessageBtn1').onclick = function() {
            showMessage2();
        };

        // 定义函数显示在线客服对话框
        function showMessage1 () {
            layer.open({
                type: 2,
                title: '在线客服',
                shadeClose: false, // 禁止点击遮罩关闭
                shade: false, // 不显示遮罩层
                area: ['400px', '65vh'],
                offset: 'rb', // 对话框位置固定在按钮的左上角
                content: 'kh.jsp' // 在这里替换成你的在线客服链接
            });
        }
        // 定义函数显示在线客服对话框
        function showMessage2 () {
            layer.open({
                type: 2,
                title: '在线客服',
                shadeClose: false, // 禁止点击遮罩关闭
                shade: false, // 不显示遮罩层
                area: ['400px', '65vh'],
                offset: 'rb', // 对话框位置固定在按钮的左上角
                content: 'kf.jsp' // 在这里替换成你的在线客服链接
            });
        }
    });
</script>

</body>
</html>
